<!-- 
  方法说明：
  addEmptyRow：新增一个空行
  refreshTable：刷新表格数据，从远端读取数据更新到本地显示。
  colHeaderAlign：根据字段名返回该字段列头的对齐方式
  startEdit：开启一行的编辑模式

  属性说明：
  vari.tableData：表格的数据源
  vari.tableStyle:业务数据表在样式表 table_style 中的设置的参数的集合，一行是针对业务表一个字段的配置
  -->
<div>
  <a (click)="addEmptyRow()"><i nz-icon nzType="plus" nzTheme="outline"></i>&nbsp;新增行</a>&nbsp;
  <a (click)="refreshTable()"><i nz-icon nzType="sync" nzTheme="outline"></i>&nbsp;刷新</a>
</div>&nbsp;
<nz-table #zorroTable nzBordered [nzData]="vari.tableData" nzSize="small">
  <thead>
    <tr class="strip">
      <th nzWidth="6%">#</th><!-- 序号列 -->
      <ng-container *ngFor="let item of vari.tableStyle"><!-- 遍历样式表构建列头，不创建immutable列 -->
        <th *ngIf="!item.immutable" [nzWidth]="item.width_percent_str" 
          [nzAlign]="colHeaderAlign(item.field_name)">
          {{ item.text }}
        </th>
      </ng-container>
    </tr>
  </thead>

  <tbody>
    <!-- 
      class.strip 是斑马纹，将下面的样式代码拷贝到css文件中
      /* 表格组件斑马纹 */
      .strip{
          background-color: #eff4f9;
      }
    -->
    <tr *ngFor="let rowData of zorroTable.data;let rowIndex=index" (dblclick)="startEdit(rowIndex,rowData['uuid'],$event)"
      (mouseover)="mouseOver(mouseOverUUID = rowData.uuid)" [class.strip]="rowIndex%2 !== 0">
      <td><!-- 序号 + 图标列 -->
        <!-- 序号列 - 显示状态下的两个图标：删除、复制 -->
        <div *ngIf="!cache.detail[rowData['uuid']].edit;else editIconTpl">
          <div *ngIf="rowData.uuid === mouseOverUUID;else rowIndexTpl" nz-row nzType="flex" nzJustify="space-between">
            <div nz-col nzSpan="10">
              <a 
                nz-popconfirm
                nzPopconfirmTitle="您确定要删除当前行?"
                (nzOnConfirm)="deleteRow(rowIndex,rowData['uuid'])"
                (nzOnCancel)="cancelDeleteRow()"
                nzPopconfirmPlacement="top"
              ><i nz-icon nzType="delete" nzTheme="outline"></i></a>
            </div>

            <div nz-col nzSpan="10">
              <a 
                (click)="copyRow(rowIndex,rowData['uuid'])"><i nz-icon nzType="copy" nzTheme="outline"></i></a>
                <!-- 由于空间有限只能放两个图标，一开始是：删除、编辑，后来修改为：删除、复制，通过双击行开启编辑状态 -->
              <!-- <a (click)="startEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="edit" nzTheme="outline"></i></a> -->
            </div>
          </div>
          <ng-template #rowIndexTpl>{{rowIndex+1}}</ng-template>
        </div>

        <!-- 序号列 - 编辑状态下的两个图标：取消、保存 -->
        <ng-template #editIconTpl>
          <div nz-row nzType="flex" nzJustify="space-between">
            <div nz-col nzSpan="10"><!-- 取消编辑 nz-tooltip nzTooltipTitle="取消编辑" -->
              <a 
                (click)="cancelEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="redo" nzTheme="outline"></i></a>
            </div>


            <div nz-col nzSpan="10"><!-- 保存 nz-tooltip nzTooltipTitle="保存" -->
              <a 
                (click)="saveEdit(rowIndex,rowData['uuid'])"><i nz-icon nzType="save" nzTheme="outline"></i></a>
            </div>
          </div>
        </ng-template>
      </td>

      <!-- 序号之后的所有数据列 -->
      <ng-container *ngFor="let tsRow of vari.tableStyle">
        <td *ngIf="!tsRow.immutable" [nzAlign]="colContentAlign(tsRow.field_name)">
          <!-- 显示模式 -->
          <ng-container *ngIf="!cache.detail[rowData['uuid']].edit;else editTpl">

            <ng-container *ngIf="tsRow.date_pipe;else plainShowTpl">
              {{ rowData[tsRow.field_name] | date:tsRow.date_formatter }}
            </ng-container>
            <ng-template #plainShowTpl>
              {{ convertRaw2Show(rowData,tsRow) }}
            </ng-template>

          </ng-container>
          
          <ng-template #editTpl><!-- 编辑模式，使用 switch 枚举用于编辑的控件类型 -->

            <span [ngSwitch]="tsRow.ctl_type">
            <p *ngSwitchCase="'optsEnum'"><!-- 下拉选择 - 枚举 -->
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" [(ngModel)]="cache.detail[rowData.uuid].data[tsRow.field_name]" style="width: 100%;">
                <nz-option *ngFor="let item of opts_enum[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
              </nz-select>

            </p>
            <p *ngSwitchCase="'date'"><!-- 日期控件  [nzFormat]="'yyyy-MM-dd HH:mm:ss'" -->
              <nz-date-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="cache.detail[rowData.uuid].data[tsRow.field_name]"></nz-date-picker>
            </p>
            <p *ngSwitchDefault><!-- 常规的 input -->
              <input type="text" nz-input [(ngModel)]="cache.detail[rowData.uuid].data[tsRow.field_name]" 
                (ngModelChange)="inputChange(cache.detail[rowData.uuid].data,tsRow)"/>
            </p>

            <p *ngSwitchCase="'locked'"><!-- 被锁定 -->
              <!-- {{ cache.detail[rowData.uuid].data[tsRow.field_name] }} -->
              <!-- {{ resolveFormula(rowData,tsRow) }} -->
              {{ breadField.showLocked(rowData,tsRow) }}
            </p>

            </span>

          </ng-template>

        </td>
      </ng-container>

    </tr>

    <!-- 统计 -->
    <!-- <tr>
      <td>合计：</td>
      <ng-container *ngFor="let tsRow of vari.tableStyle">
        <td *ngIf="!tsRow.immutable" [nzAlign]="'right'">
          <ng-container *ngIf="tsRow.statistics;else elseBlock">
            {{ vari.statistics[tsRow.field_name]?.label }}
          </ng-container>
          
          <ng-template #elseBlock></ng-template>
        </td>
      </ng-container>
      
    </tr> -->
  </tbody>

</nz-table>
